<%@page contentType="text/html;charset=UTF-8" %>
<%@page pageEncoding="UTF-8" %>
<%@ page session="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <title>Dopios City Advices</title>
    <SCRIPT language="javascript">
        $(document).ready(function () {
            var form = $('#cityAdvicesForm');

            form.find('select').change(function () {
                        $.ajax({
                            type: "POST",
                            url: form.attr('action'),
                            data: form.serialize(),
                            success: function (response) {
                                console.log(response);
                            }
                        });
                        deleteNotInterestedRows('advicesTable');
                    }
            );

        });

        function deleteNotInterestedRows(tableID) {
            try {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
                var userId = null;
                for (var i = 0; i < rowCount; i++) {
                    var row = table.rows[i];
                    var ratingOption = row.cells[1].childNodes[0];
                    if (null != ratingOption && 1 == ratingOption.value) {
                        userId = row.cells[2].childNodes[0];
                    }
                }
                for (var i = 0; i < rowCount; i++) {
                    var row = table.rows[i];
                    var ratingOption = row.cells[1].childNodes[0];
                    var currentUserId;
                    if (row.cells.length > 2) {
                        currentUserId = row.cells[2].childNodes[0];
                    }
                    if (null != currentUserId && null != userId && currentUserId.value === userId.value) {
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }
                }
            } catch (e) {
                alert(e);
            }
        }
        //window.onpaint = deleteNotInterestedRows('advicesTable');
    </SCRIPT>
</head>
<body>
<form:form modelAttribute="cityAdvicesForm" commandName="cityAdvicesForm" action="processCityAdvicesForm"
           method="post">
    <table id="advicesTable" border=1>
        <thead>
        <tr>
            <th>Advice</th>
            <th>Rating</th>

        </tr>
        </thead>
        <tbody>
        <c:forEach items="${cityAdvicesForm.cityAdvices}" var="advice" varStatus="status">
            <tr>        
                <input id="cityAdvices[${status.index}].id" name="cityAdvices[${status.index}].id" type="hidden"
                       value="${advice.id}"/>
                <td style="width: 200px;"><input style="width: 500px;" name="cityAdvices[${status.index}].advice" value="${advice.advice}" readonly="readonly"
                           style=" border:none; background: transparent;"></td>
                <!--<td><input name="cityAdvices[${status.index}].rating" value="${advice.rating}"/></td> -->
                <td><form:select path="cityAdvices[${status.index}].rating" itemValue="${advice.rating}">
                    <form:options items="${ratingOptions}"/>
                </form:select></td>
                <td><input id="cityAdvices[${status.index}].id" name="cityAdvices[${status.index}].userAddedId"
                           type="hidden"
                           value="${advice.userAddedId}"/></td>

            </tr>
        </c:forEach>
        </tbody>
    </table>
</form:form>
</body>
</html>